;$(function() {
    window.creatIChart = function (chartName,flow) {

        var BaseData = {
            render : '',
            data : null,
            title : {
                text : '',
                color : '#3A3A3A',
                fontsize:12,
                fontweight:520,
                padding:-10
            },
            width : 260,
            height : 180,
            offsety:-8,
            label : {
                fontsize:11,
                color : '#3A3A3A'
            },
            column_width : 37,
            sub_option : {
                border:0,
                listeners : {
                    parseText : function(r, t) {
                        return t ;
                    }
                },
                label : {
                    fontsize:11,
                    color : '#4572a7'
                },

            },
            coordinate : {
                background_color : null,
                width : 200,
                height: 110,
                axis : {
                    color : '#c0d0e0',
                    width : [0, 0, 0, 0]
                },
                scale : [{
                    position : 'left',
                    start_scale : 0,
                    end_scale : 60,
                    scale_space : 20,
                    scale_enable : false,
                    text_space:3,
                    label : {
                        fontsize:11,
                        color : '#3A3A3A'
                    }
                }]
            }
        }

        var data = {
                "canvasUnitPir":[{name : '',value : null,color : ''},{name : '',value : null,color : ''}],
                "canvasWaringPir":[{name : '',value : null,color : ''},{name : '',value : null,color : ''}]
             } ;
            // {name : '',value : null,color : ''},
            // {name : '',value : null,color : ''}

        var canvasUnitPir = document.getElementById("canvasUnitPir"); //设备数量chart
        var canvasWaringPir = document.getElementById("canvasWaringPir"); //警报数量chart

        if(canvasUnitPir){
            BaseData.data = data.canvasUnitPir;
            BaseData.render = canvasUnitPir ;
            for(var i=0;i<BaseData.data.length;i++){
                if(i==0){
                    data.canvasUnitPir[i].name = "online";
                    data.canvasUnitPir[i].value = "86";
                    data.canvasUnitPir[i].color = "#7DD320";
                }
                if(i==1){
                    data.canvasUnitPir[i].name = "offline";
                    data.canvasUnitPir[i].value = "5";
                    data.canvasUnitPir[i].color = "#FF5A59";
                }
            }
            BaseData.title.text = "设备数量("+ (parseInt(BaseData.data[0].value) + parseInt(BaseData.data[1].value)) + ")";
        }

        if(canvasWaringPir){
            BaseData.data = data.canvasWaringPir;
            BaseData.render = canvasWaringPir ;
            for(var i=0;i<BaseData.data.length;i++){
                if(i==0){
                    data.canvasWaringPir[i].name = "黄色报警";
                    data.canvasWaringPir[i].value = "13";
                    data.canvasWaringPir[i].color = "#FEBF17";
                }
                if(i==1){
                    data.canvasWaringPir[i].name = "红色报警";
                    data.canvasWaringPir[i].value = "6";
                    data.canvasWaringPir[i].color = "#FF5A59";
                }
            }
            BaseData.title.text = "报警数量("+ (parseInt(BaseData.data[0].value) + parseInt(BaseData.data[1].value)) + ")";
        }

        var chart = new iChart.Column2D(BaseData);

        /**
         *利用自定义组件构造左侧说明文本。
         */
        chart.plugin(new iChart.Custom({
            drawFn:function(){
                /**
                 *计算位置
                 */
                var coo = chart.getCoordinate(),
                    x = coo.get('originx'),
                    y = coo.get('originy'),
                    H = coo.height;
                /**
                 *在左侧的位置，设置逆时针90度的旋转，渲染文字。
                 */
                chart.target.textAlign('center')
                    .textBaseline('top')
                    .textFont('600 12px Verdana')
                    .fillText('',x,y+H/2,false,'#6d869f', false,false,false,-10);

            }
        }));
        chart.draw();
        return chart;
    }
});